<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/article_list.css" />
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.3/dist/css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.3/dist/layui.js"></script>
    <script src="./jquery3.6.0.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div class="main-box" id="main_box">

    </div>

    <script>
        let page = 1;
        let size = 10;

        /**
         * 展示列表
         */
        function show_list(data) {
            let mainBox = $("#main_box");
            if (data.data.list) {
                data.data.list.forEach(item => {
                    let s = `<div class="item">
                                <div class="title">${item.title}</div>
                                <div class="content">${item.content}</div>
                            </div>`;
                    mainBox.append(s);
                });
            }

        }
        /**
         * 加载列表数据
         */
        function load_list() {
            $.get(api + "/article/get_page", { page, size }, function (data) {
                if (data.code !== 0) {
                    alert(data.msg);
                    return;
                }
                show_list(data);
            });
        }

        $(function () {
            load_list();
        });
    </script>
</body>

</html>